<template>
  <div class="home">
     我是首页，欢迎来到王者荣耀{{num}}
     <button @click="add">++</button>
     <p id="dom">我是dome节点</p>
     <p>十一要来了，原价：{{parice}}现在做活动打5折{{country()}}</p>
     <p>十一要来了，原价：{{parice}}现在做活动打5折{{cpprice}}</p>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return{
      num: 10,
      parice: 1999
    }
  },
  computed:{ // 计算属性
     cpprice(){  // 只要相关的数据不发生改变，结果就会被缓存起来，不会多次被计算
       console.log('dedede');
       return this.parice*0.5;
     }
  },
  watch:{ // 监听
    num(){
      console.log('数据更新了');
    }
  },
  // beforeCreate(){
  //   console.log(this.num);
  // },


  // 常用的声明周期 created mounted 
  created(){
    // this.num = 100;
    // console.log(this.num);
    // console.log('created');
    let dom = document.querySelector("#dom");
    console.log(dom);
    
  },
  // beforeMount(){
  //   console.log('beforeMount');
  // },
  mounted(){
    let dom = document.querySelector("#dom");
    console.log(dom);
    // console.log('mounted');

  },
  // beforeUpdate(){
  //   console.log('beforeUpdate');
  // },
  // updated(){
  //   console.log('updated');
  // },
  // beforeDestroy(){
  //   // setTimeout(()=>{
  //   //   this.$router.push('/');
  //   // },3000)
  // },
  // destroyed(){
  //   // setTimeout(()=>{
      
  //   //   // console.log('destroyed');
  //   // },3000)
  //   // this.$router.push('/');
  //   // console.log('destroyed');
  // },
  methods: {
    add(){
      this.num++;
    },
    country(){
      console.log('方法被执行了');
      return this.parice*0.5;
    }
  },
}
</script>
